import React, { Fragment, useEffect } from 'react';
import { Form, Row, Col } from 'antd';
import { useTRState, useStaticState } from '#/utils/trHooks';
import { LINKED_FORM_ITEM_LIST } from './helper';

const LinkedFormItem = (props) => {
  const { handleSearchSubmit, isVertical, formType = 'search' } = props;

  const staticState = useStaticState({
    LINKED_FORM_ITEM_LIST: {
      search: LINKED_FORM_ITEM_LIST,
    },
  });

  const ItemLineContainer = isVertical ? Row : Fragment;
  const ItemLineContainerProps = isVertical ? { gutter: 16 } : {};
  const ItemLineCol = isVertical ? Col : Fragment;
  const itemLineColProps = isVertical ? { span: 12 } : {};

  const onSearch = (value) => {
    handleSearchSubmit(value);
  };

  return (
    <ItemLineContainer {...ItemLineContainerProps}>
      {staticState.LINKED_FORM_ITEM_LIST[formType].map((linkedFormItem) => {
        return (
          <ItemLineCol key={linkedFormItem.key} {...itemLineColProps}>
            <Form.Item
              key={linkedFormItem.key}
              name={linkedFormItem.key}
              label={linkedFormItem.label}
              rules={linkedFormItem.rules}
            >
              <linkedFormItem.components
                {...linkedFormItem.attrs}
                style={{ width: linkedFormItem.width, marginLeft: `${isVertical ? 0 : 12}px` }}
                onSearch={onSearch}
              />
            </Form.Item>
          </ItemLineCol>
        );
      })}
    </ItemLineContainer>
  );
};

export default LinkedFormItem;
